<template>
  <div class="main">
    <div><van-nav-bar title="借书" fixed /></div>

    <div class="search">
      <van-search
        v-model="value"
        show-action
        background="#BF3EFF"
        shape="round"
        label="书名"
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <div @click="clickSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main-borrow">
      <van-tabs v-model:active="actives" @click-tab="changeType">
        <van-tab
          v-for="item in typeNum"
          :title="item.type"
          :key="item.id"
          :name="item.type"
          ><van-card
            v-for="item in book"
            :key="item.id"
            :num="item.num"
            :tag="item.type"
            :price="item.price"
            :desc="item.author"
            :title="item.name"
            :thumb="item.image"
          >
            <template #footer>
              <van-button
                round
                size="small"
                @click="borrow(item.id)"
                type="success"
                >借书</van-button
              >
            </template>
          </van-card></van-tab
        >
      </van-tabs>
    </div>
    <div class="page">
      <van-pagination
        v-model="page"
        :total-items="sum"
        :show-page-size="3"
        :items-per-page="size"
        force-ellipses
        @change="changePage"
      />
    </div>
    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item replace to="/main" icon="wap-home-o"
          >首页</van-tabbar-item
        >
        <van-tabbar-item replace to="/borrow" icon="new-o"
          >借书</van-tabbar-item
        >
        <van-tabbar-item replace to="/history" icon="records"
          >历史借阅</van-tabbar-item
        >
        <van-tabbar-item replace to="/personal" icon="user-circle-o"
          >个人中心</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { getBook } from "@/api/bookApi";
import { selectAll } from "@/api/typeApi";
import { borrowBook } from "@/api/historyApi";
export default {
  data() {
    return {
      active: 1,
      actives: "",
      typeNum: {
        id: "1",
        type: "历史",
      },
      page: 1,
      size: 3,
      sum: 6,
      value: "",
      book: {
        id: "",
        name: "",
        num: "",
        price: "",
        type: "",
        author: "",
        image: "",
      },
    };
  },
  methods: {
    changePage() {
      getBook({
        page: this.page,
        size: this.size,
        name:
          localStorage.getItem("name") != null
            ? localStorage.getItem("name")
            : "",
        author: "",
        type:
          localStorage.getItem("type") != null
            ? localStorage.getItem("type")
            : "",
      }).then((res) => {
        this.sum = res.total;
        this.book = res.date;
      });
    },
    changeType(title) {
      localStorage.setItem("type", title.title);
      this.changePage();
    },
    clickSearch() {
      localStorage.setItem("name", this.value);
      this.changePage();
    },
    borrow(book) {
      /**验证是否超过借书限制 */
      /**提示是否进行借书 */
      /**借书成功,数量减一 */
      this.$Modal.confirm({
        title: "借书",
        content: "你确认借出该书吗？",
        onOk: () => {
          borrowBook({
            username: localStorage.getItem("username"),
            bookId: book,
          }).then((res) => {
            if (res == false) {
              this.$Message.error("借书失败,已借数达到最大");
            } else {
              this.$Message.success("借书成功");
              localStorage.removeItem("type");
              localStorage.removeItem("name");
              window.setTimeout(function () {
                window.location.reload();
              }, 1000);
            }
          });
        },
      });
    },
  },
  created() {
    localStorage.removeItem("type");
    localStorage.removeItem("name");
    this.changePage();
    selectAll({}).then((res) => {
      this.typeNum = res;
    });
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}

.search {
  margin-top: 15%;
}
</style>
